// src/router/index.js就是当前项目的路由模块

// 1,导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home-1.vue'
import Movie from '@/components/Movie-1.vue'
import About from '@/components/About-1.vue'
import tab1 from '@/components/tab-1.vue'
import tab2 from '@/components/tab-2.vue'
import Login from '@/components/Login-1.vue'
import Main from '@/components/Main-1.vue'

// 2，调用Vue.use()函数，把VueRouter安装为Vue的插件.Vue.use()函数的作用就是来安装插件的
Vue.use(VueRouter)

// 3,创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组，用来定义 hash地址 与 组件 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
    // 在movie组件中，根据id的值，展示对应人物的详情信息
    // 可以为路由规则开启props传参，从而方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // 默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做“默认子路由”
      children: [
        { path: 'tab1', component: tab1 },
        { path: 'tab2', component: tab2 }
      ]
    },
    { path: '/Login', component: Login },
    { path: '/Main', component: Main }
  ]
})

// 为router实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发beforeEach的回调
// 守卫方法的三个形参：
// to：是将要访问的路由的信息对象
// from：是将要离开的路由的信息对象
// next：是一个函数，调用next() 表示放行，允许这次路由导航
router.beforeEach(function (to, from, next) {
  // next()

  if (to.path === '/Main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/Login')
    }
  } else {
    next()
  }
})

// 4,向外共享路由的实例对象
export default router
